<template>
	<view class="register-container">
		<!-- 头像上传 -->
		<view class="avatar-container">
			<view class="avatar-uploader" @click="chooseAvatar">
				<image v-if="formData.avatar_url" :src="formData.avatar_url" class="avatar"></image>
				<view v-else class="avatar-placeholder">
					<uni-icons type="camera" size="30" color="#999"></uni-icons>
					<text>上传头像</text>
				</view>
			</view>
		</view>

		<view class="register-form">
			<!-- 姓名 -->
			<view class="form-item">
				<text class="label">姓名</text>
				<input v-model="formData.name" class="input" placeholder="请输入真实姓名" placeholder-class="placeholder" />
			</view>

			<!-- 昵称 -->
			<view class="form-item">
				<text class="label">昵称</text>
				<input v-model="formData.nickname" class="input" placeholder="请输入昵称" placeholder-class="placeholder" />
			</view>

			<!-- 手机号 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<input v-model="formData.phone" class="input" type="number" placeholder="请输入手机号码"
					placeholder-class="placeholder" maxlength="11" />
			</view>

			<!-- 验证码 -->
			<view class="form-item">
				<text class="label">验证码</text>
				<view class="code-input-container">
					<input v-model="formData.code" class="input code-input" placeholder="请输入验证码" placeholder-class="placeholder" />
					<button class="send-code-btn" :disabled="countdown > 0" @click="sendVerifyCode">
						{{countdown > 0 ? `${countdown}s后重发` : '获取验证码'}}
					</button>
				</view>
			</view>

			<!-- 性别 -->
			<view class="form-item">
				<text class="label">性别</text>
				<picker mode="selector" :range="genderList" @change="handleGenderChange">
					<view class="picker">
						{{formData.sex || '请选择性别'}}
					</view>
				</picker>
			</view>

			<!-- 出生日期 -->
			<view class="form-item">
				<text class="label">出生日期</text>
				<picker mode="date" fields="year-month-day" :value="formData.birthday" :start="startDate" :end="endDate"
					@change="handleBirthdayChange">
					<view class="picker">
						{{formData.birthday || '请选择出生日期'}}
					</view>
				</picker>
			</view>

			<!-- 注册按钮 -->
			<view class="register-btn" :class="{disabled: !canSubmit}" @click="handleRegister">
				立即注册
			</view>
		</view>
	</view>
</template>

<script>
	import {
		studentRegistration,
		StudentgetCode
	} from "../../utils/getDate.js";
	export default {
		data() {
			// 获取当前日期用于日期选择器范围
			const now = new Date()
			const year = now.getFullYear()
			const month = now.getMonth() + 1
			const day = now.getDate()

			return {
				formData: {
					name: '',
					nickname: '',
					phone: '',
					code: '',
					sex: '',
					birthday: '',
					avatar_url: ''
				},
				countdown: 0,
				timer: null,
				genderList: ['男', '女'],
				// 日期选择范围
				startDate: '1900-01-01',
				endDate: `${year}-${month}-${day}`
			}
		},
		computed: {
			// 是否可以提交表单
			canSubmit() {
				return (
					this.formData.name &&
					this.formData.nickname &&
					this.formData.phone &&
					/^1[3-9]\d{9}$/.test(this.formData.phone) &&
					this.formData.code &&
					this.formData.sex &&
					this.formData.birthday &&
					this.formData.avatar_url
				)
			}
		},
		onUnload() {
			// 清除倒计时
			if (this.timer) clearInterval(this.timer)
		},
		methods: {
			// 选择性别
			handleGenderChange(e) {
				const index = e.detail.value
				this.formData.sex = this.genderList[index]
			},

			// 选择出生日期
			handleBirthdayChange(e) {
				this.formData.birthday = e.detail.value
			},

			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const maxSizeInBytes = 1024 * 1024; // 1MB
						
						uni.getFileInfo({
							filePath: tempFilePath,
							success: res => {
								if (res.size > maxSizeInBytes) {
									uni.showToast({
										title: '请上传小于1MB的图片',
										icon: 'none'
									});
									return;
								}
								
								// 先显示本地图片
								this.formData.avatar_url = tempFilePath;
								
								// 上传到服务器
								uni.uploadFile({
									url: 'https://applet.eapchina.net/api/sleep/uploadFile',
									filePath: tempFilePath,
									name: 'file',
									success: (res) => {
										const data = JSON.parse(res.data);
										if (data.imgUrl) {
											this.formData.avatar_url = data.imgUrl;
										} else {
											uni.showToast({
												title: '头像上传失败',
												icon: 'none'
											});
										}
									},
									fail: (err) => {
										uni.showToast({
											title: '头像上传失败',
											icon: 'none'
										});
									}
								});
							},
							fail: (err) => {
								uni.showToast({
									title: '获取图片信息失败',
									icon: 'none'
								});
							}
						});
					}
				})
			},

			// 发送验证码
			sendVerifyCode() {
				if (this.countdown > 0) return

				if (!this.formData.phone || !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				
				// 调用获取验证码接口
				let data = {
					phone: this.formData.phone
				}
				StudentgetCode(data).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})
					
					// 开始倒计时
					this.countdown = 60
					this.timer = setInterval(() => {
						if (this.countdown <= 0) {
							clearInterval(this.timer)
							return
						}
						this.countdown--
					}, 1000)
				}).catch(err => {
					uni.showToast({
						title: '验证码发送失败',
						icon: 'none'
					})
				})
			},

			// 处理注册
			handleRegister() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '注册中...'
				})
				
				// 调用注册接口
				studentRegistration(this.formData).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
					
					// 注册成功后跳转到登录页面或其他页面
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err.message || '注册失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.register-container {
		padding: 40rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}
	
	.avatar-container {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.register-form {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.form-item {
		margin-bottom: 40rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: -20rpx;
			width: 100%;
			height: 1rpx;
			background-color: #eee;
		}

		&:last-child::after {
			display: none;
		}
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.input {
		height: 80rpx;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
		padding: 10rpx 0;
	}

	.placeholder {
		color: #ccc;
		font-size: 32rpx;
	}

	.picker {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;

		&::after {
			content: '>';
			position: absolute;
			right: 0;
			color: #999;
			transform: rotate(90deg);
		}
	}

	.register-btn {
		width: 100%;
		text-align: center;
		margin-top: 60rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 8rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		
		&.disabled {
			background-color: #ccc;
		}
	}

	.code-input-container {
		display: flex;
		align-items: center;
	}
	
	.code-input {
		flex: 1;
		margin-right: 20rpx;
	}
	
	.send-code-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: #007AFF;
		background-color: #fff;
		border: 1rpx solid #007AFF;
		border-radius: 8rpx;
		padding: 0;
		
		&[disabled] {
			color: #999;
			border-color: #ccc;
		}
	}
	
	.avatar-uploader {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border: 1rpx dashed #ddd;
	}
	
	.avatar {
		width: 100%;
		height: 100%;
	}
	
	.avatar-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999;
		
		text {
			margin-top: 10rpx;
		}
	}
</style>